<template>
  <AdVxeModal
    v-bind="$attrs"
    @register="register"
    :id="'ad-table-search-modal'"
    :title="t('common.adSearchText')"
    :cancelText="t('common.closeText')"
    :cancelButtonProps="{ loading: cancelLoading }"
    :close-func="handleClose"
    :okText="t('common.searchText')"
    @ok="handleOk"
    @keyup="handleEnterPress"
    width="618px"
  >
    <AdSearchContainer :filterGroup="filterGroup" :parentGroup="undefined" :columns="columns" />

    <template #insertFooter>
      <Button @click="handleReset" :loading="resetLoading">
        <Icon icon="grommet-icons:power-reset" />{{ t('common.resetText') }}
      </Button>
    </template>
  </AdVxeModal>
</template>
<script lang="ts" setup>
  import type { PropType } from 'vue';
  import { ref } from 'vue';
  import { AdVxeModal, useModalInner } from '@/components/AdVxeModal';
  import { Button } from 'ant-design-vue';
  import Icon from '@/components/Icon/Icon.vue';

  import { useI18n } from '@/hooks/web/useI18n';
  import { isFunction } from '@/utils/is';
  import { FilterGroup } from '@/utils/common/types';

  import AdSearchContainer from './AdSearchContainer.vue';
  import { AdColumn } from '../types/adTable';

  defineOptions({ name: 'AdSearchModal' });
  const props = defineProps({
    /** 重置回调 */
    resetFunc: {
      type: Function as PropType<() => Promise<void>>,
      default: null,
    },
    /** 关闭回调，返回true关闭窗体 */
    closeFunc: {
      type: Function as PropType<() => Promise<boolean>>,
      default: null,
    },
    /** 搜索回调，返回true关闭窗体 */
    searchFunc: {
      type: Function as PropType<() => Promise<boolean>>,
      default: null,
    },
    /** 查询条件组 */
    filterGroup: {
      type: Object as PropType<FilterGroup>,
      default: null,
    },
    /** 列配置 */
    columns: {
      type: [Array] as PropType<AdColumn[]>,
      default: () => [],
    },
  });

  const { t } = useI18n();
  const resetLoading = ref(false);
  const cancelLoading = ref(false);

  const [register, { closeModal, changeOkLoading }] = useModalInner();

  /** 处理重置按钮 */
  async function handleReset() {
    resetLoading.value = true;

    const { resetFunc } = props;
    try {
      if (resetFunc && isFunction(resetFunc)) {
        await resetFunc();
      }
    } finally {
      resetLoading.value = false;
    }
  }
  /** 处理关闭按钮 */
  async function handleClose() {
    cancelLoading.value = true;

    const { closeFunc } = props;
    try {
      if (closeFunc && isFunction(closeFunc)) {
        const result = await closeFunc();
        return result;
      }
    } finally {
      cancelLoading.value = false;
    }
    return true;
  }
  /** 处理确定按钮 */
  async function handleOk() {
    changeOkLoading(true);

    const { searchFunc } = props;
    try {
      if (searchFunc && isFunction(searchFunc)) {
        const canClose = await searchFunc();
        if (canClose) {
          closeModal();
        }
      } else {
        closeModal();
      }
    } finally {
      changeOkLoading(false);
    }
  }

  /** 处理回车事件 */
  async function handleEnterPress(e: KeyboardEvent) {
    if (
      e.key.toLowerCase() === 'Enter'.toLowerCase() &&
      e.target &&
      e.target instanceof HTMLElement
    ) {
      await handleOk();
      // const target: HTMLElement = e.target as HTMLElement;
      // if (target && target.tagName && target.tagName.toUpperCase() == 'INPUT') {
      //   handleOk();
      // }
    }
  }
</script>
